<script setup>
import InputText from "../../components/InputText.vue";
import InputSelect from "../../components/InputSelect.vue";
import Button from "../../components/Button.vue";
import IconSvg from "../../components/IconSvg.vue";
import DataTable from "../../components/DataTable.vue";
import Model from "../../components/Model.vue";
import PaginationBasic from "../../components/PaginationBasic.vue";
import Message from "../../components/Message/Message.js";
import {
  DeviceConstants
} from '../../utils/constants.js';
import { ref, onMounted } from "vue"
import axios from "../../axios/axios.js";
const searchInfo = ref({ name: '', categoryName: '' });
const showAddModel = ref(false)
const addInfo = ref({})
const operateItem = ref()
const isAdd = ref(false)
const showRegisterModel = ref(false)
const pageData = ref({
  currentPage: 1,
  total: 0,
  pageSize: 10,
})
const pageRegisterData = ref({
  currentPage: 1,
  total: 0,
  pageSize: 10,
})
// 页码变化时触发
const handlePageChange = (page) => {
  pageData.value.currentPage = page
  // 这里可以调用接口加载对应页的数据
  getData()
}
const tableData = ref()

// 列配置
const tableColumns = ref([
  { key: 'id', title: '编号', dataIndex: 'id', width: 60 },
  { key: 'name', title: '名称', dataIndex: 'name' },
  { key: 'externalcode', title: '外部代码', dataIndex: 'externalcode' },
  { key: 'categoryname', title: '品类名称', dataIndex: 'categoryname' },
  { key: 'encodetypename', title: '编码类型', dataIndex: 'encodetypename' },
  { key: 'createTime', title: '创建时间', dataIndex: 'createtime' },
])
const openAddModel = () => {
  isAdd.value = true
  showAddModel.value = true
}
const handleConfirm = () => {
  if (!addInfo.value.type || addInfo.value.type == "") {
    Message.warn('请选择类型')
    return
  }
  if (!addInfo.value.modelName || addInfo.value.modelName == "") {
    Message.warn('请输入名称')
    return
  }
  if (!addInfo.value.encodetypename || addInfo.value.encodetypename == "") {
    Message.warn('请选择编码类型')
    return
  }
  if (!addInfo.value.modelCode || addInfo.value.modelCode == "") {
    Message.warn('请输入型号代码')
    return
  }
  var typeName = encodeType.find(item => {
    return item.value == addInfo.value.encodetypename
  })

  Message.success('正在添加')
  console.log({
    "categoryid": selectTypeInfo.value.categoryId,  // 品类id
    "categoryname": selectTypeInfo.value.categoryName, // 品类名称
    "categorylinkname": selectTypeInfo.value.categoryLinkName, // 链路名称 1-3
    "categoryfullname": selectTypeInfo.value.categoryFullName, // 全名称 1-2-3
    "categoryparentid": selectTypeInfo.value.categoryParentId, // 父级品类Id
    "categorylevel": selectTypeInfo.value.categoryLevel, // 层级
    "categorycode": selectTypeInfo.value.categoryCode, // 品类代码
    "categorycodeuserid": selectTypeInfo.value.categoryCodeUseId, // 用途id
    "categorytypeid": selectTypeInfo.value.categoryTypeId, // 类型id  1：人 2：事 3：物
    "modelname": addInfo.value.modelName, // 型号名称
    "encodetypename": typeName.label, // 编码类型id “MA” "Ecode"
    "modelcode": addInfo.value.modelCode, // 型号代码
    "externalcode": addInfo.value.externalCode, // 外部型号代码

  });

  axios.post("/api/identify/save", {
    "categoryid": selectTypeInfo.value.categoryId,  // 品类id
    "categoryname": selectTypeInfo.value.categoryName, // 品类名称
    "categorylinkname": selectTypeInfo.value.categoryLinkName, // 链路名称 1-3
    "categoryfullname": selectTypeInfo.value.categoryFullName, // 全名称 1-2-3
    "categoryparentid": selectTypeInfo.value.categoryParentId, // 父级品类Id
    "categorylevel": selectTypeInfo.value.categoryLevel, // 层级
    "categorycode": selectTypeInfo.value.categoryCode, // 品类代码
    "categorycodeuserid": selectTypeInfo.value.categoryCodeUseId, // 用途id
    "categorytypeid": selectTypeInfo.value.categoryTypeId, // 类型id  1：人 2：事 3：物
    "modelname": addInfo.value.modelName, // 型号名称
    "encodetypename": typeName.label, // 编码类型id “MA” "Ecode"
    "modelcode": addInfo.value.modelCode, // 型号代码
    "externalcode": addInfo.value.externalCode, // 外部型号代码
    "type": DeviceConstants.TYPE_MAP[addInfo.value.type]
  }).then(res => {
    if (res.data.Code == "200") {
      Message.success('添加成功')
      showAddModel.value = false
      isAdd.value = false
      addInfo.value = {}
      selectTypeInfo.value = {}
      getData()
    } else {
      Message.warn(res.data.Msg)
    }
  })
}
const handleCancel = () => {
  isAdd.value = false
  addInfo.value = {}
  showAddModel.value = false
  operateItem.value = {}
}

const resetSearch = () => {
  searchInfo.value = { name: '', categoryName: '' }
  getData()
}


const selectTypeInfo = ref({})
const categoryTypeInfo = [
  {
    id: 1, categoryId: "2818", categoryName: "冲压加工", categoryParentId: "2810", categoryLevel: "3",
    categoryCode: "25052006", categoryCodeUseId: "10", categoryTypeId: "3", purpose: "产品", categoryFullName: "机械及行业设备-金属加工-冲压加工",
    categoryLinkName: "机械及行业设备-冲压加工", encodetypename: "", modelCode: "", externalCode: "", modelName: ""
  },

  {
    id: 2, categoryId: "2548", categoryName: "冲压模", categoryParentId: "2545", categoryLevel: "3",
    categoryCode: "25034002", categoryCodeUseId: "10", categoryTypeId: "3", purpose: "产品", categoryFullName: "机械及行业设备-模具-冲压模",
    categoryLinkName: "机械及行业设备-冲压加工", encodetypename: "", modelCode: "", externalCode: "", modelName: ""
  },
  {
    id: 3, categoryId: "427", categoryName: "自动化成套控制系统", categoryParentId: "220", categoryLevel: "2",
    categoryCode: "39017000", categoryCodeUseId: "10", categoryTypeId: "3", purpose: "产品", categoryFullName: "仪器仪表-自动化成套控制系统",
    categoryLinkName: "仪器仪表-自动化成套控制系统", encodetypename: "", modelCode: "", externalCode: "", modelName: ""
  },
  {
    id: 4, categoryId: "10166", categoryName: "有形资产", categoryParentId: "0", categoryLevel: "1",
    categoryCode: "10000000", categoryCodeUseId: "60", categoryTypeId: "3", purpose: "资产", categoryFullName: "资产-有形资产",
    categoryLinkName: "资产-有形资产", encodetypename: "", modelCode: "", externalCode: "", modelName: ""
  }

]
const encodeType = [
  { value: 1, label: "MA" }
]
const categoryTypeChange = () => {
  var info = categoryTypeInfo.filter(item =>
    item.id == addInfo.value.type
  )
  selectTypeInfo.value = info[0]
  makeExternalCode()
}
const makeExternalCode = () => {
  var code = ""
  if (addInfo.value.type && addInfo.value.type != "") {
    code = selectTypeInfo.value.categoryCodeUseId + "." + selectTypeInfo.value.categoryCode + "."
  }
  if (addInfo.value.modelCode && addInfo.value.modelCode != "") {
    code = code + addInfo.value.modelCode
  }
  addInfo.value.externalCode = code
}

const getData = () => {
  var url = '/api/identify/select?pageNum=' + pageData.value.currentPage + "&pageSize=" + pageData.value.pageSize
  if (searchInfo.value.name !== '') {
    url = url + "&name=" + searchInfo.value.name
  }
  if (searchInfo.value.categoryName !== '') {
    url = url + "&categoryName=" + searchInfo.value.categoryName
  }
  axios.get(url).then(res => {
    tableData.value = res.data.Data.records
    pageData.value = {
      currentPage: pageData.value.currentPage === undefined ? 1 : pageData.value.currentPage,
      total: res.data.Data.total,
      pageSize: res.data.Data.size,
    }
    // var roles = []
    // res.data.Data.records.forEach(element => {
    //   roles.push({ label: element.rolename, value: element.id })
    // });
    // sourceRole.value = roles
  })
}

onMounted(() => {
  getData()
});
</script>
<template>
  <div class="bg-[white] w-full h-full pt-[40px] px-[40px] text-base flex flex-col">
    <div class="flex justify-start items-center">
      <InputText type="text" label="名称" placeholder="请输入名称" class="w-[260px] mr-[20px]" v-model="searchInfo.name" />
      <InputText type="text" label="品类名称" placeholder="请输入品类名称" class="w-[260px] mr-[20px]" label-width="60px"
        v-model="searchInfo.categoryname" />
      <Button type="primary" content="查询" class="mr-[20px]" @click="getData">
        <template #icon>
          <IconSvg name="search" class="w-[18px] h-[18px]"></IconSvg>
        </template>
      </Button>
      <Button content="重置" class="mr-[20px]" @click="resetSearch">
        <template #icon>
          <IconSvg name="refresh" class="w-[15px] h-[15px]"></IconSvg>
        </template>
      </Button>
    </div>
    <div class="mt-[40px] flex-1 overflow-auto">
      <div class="flex justify-start items-center">
        <Button type="primary" content="新增" class="mr-[20px]" @click="openAddModel" v-perm="'category:add'">
          <template #icon>
            <IconSvg name="add" class="w-[18px] h-[18px]"></IconSvg>
          </template>
        </Button>
      </div>

      <DataTable :dataSource="tableData" :columns="tableColumns" class="mt-[20px]">
        <!-- <template #action="{ item }">
          <a @click="handleDelete(item)" class="ml-2 text-red-500 cursor-pointer">删除</a>
        </template> -->
      </DataTable>

    </div>
    <div class="flex justify-end items-center my-4">
      <label class="font-medium">共{{ pageData.total }}条</label>
      <PaginationBasic :total="pageData.total" :page-size="pageData.pageSize" v-model:current="pageData.currentPage"
        @onPageChange="handlePageChange" />
    </div>

    <Model :show="showAddModel" @close="!showAddModel">
      <template #header>
        <h3>添加品类</h3>
      </template>
      <template #body>
        <div class="flex flex-col gap-[15px]">
          <InputText type="text" label="名称" placeholder="请输入名称" class="w-[360px]" v-model="addInfo.modelName"
            label-width="60px" />
          <InputSelect label="类型" label-width="60px" class="w-[360px] mr-[20px]" v-model="addInfo.type"
            @change="categoryTypeChange">
            <option v-for="(name, id) in DeviceConstants.TYPE_MAP" :value="id">{{ name }}</option>
          </InputSelect>
          <InputText type="text" label="用途" placeholder="请选择用途" class="w-[360px]" v-model="selectTypeInfo.purpose"
            :disabled="true" label-width="60px" />
          <InputText type="text" label="品类分级" placeholder="请输入品类分级" class="w-[360px]"
            v-model="selectTypeInfo.categoryFullName" :disabled="true" label-width="60px" />
          <InputSelect label="编码类型" label-width="60px" class="w-[360px] mr-[20px]" v-model="addInfo.encodetypename">
            <option v-for="value in encodeType" :value="value.value">{{ value.label }}</option>
          </InputSelect>

          <InputText type="text" label="型号代码" placeholder="请输入型号代码" class="w-[360px]" v-model="addInfo.modelCode"
            label-width="60px" @change="makeExternalCode" />
          <InputText type="text" label="MA代码" placeholder="请输入MA代码" class="w-[360px]" v-model="addInfo.externalCode"
            :disabled="true" label-width="60px" />
        </div>

      </template>
      <template #footer>
        <div class="flex justify-around">
          <Button content="取消" @click="handleCancel"></Button>
          <Button type="primary" content="确定" @click="handleConfirm"></Button>
        </div>
      </template>
    </Model>

  </div>
</template>

<style scoped></style>
